<template>
  <div v-if="active">
    <teleport v-if="fullscreen" to="#app">
      <div class="basic fullscreen" @click="$emit('click:fullscreen')">
        <Vue3Lottie
          :animation-data="data"
          :width="width"
          :height="height"
          :speed="speed"
          :loop="loop"
          :auto-play="autoPlay"
          ref="lottieContainer"
          @on-complete="$emit('on:complete')"
        />
      </div>
    </teleport>
    <div v-else class="basic">
      <Vue3Lottie
        :animation-data="data"
        :width="width"
        :height="height"
        :speed="speed"
        :loop="loop"
        :auto-play="autoPlay"
        ref="lottieContainer"
        @on-complete="$emit('on:complete')"
      />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Vue3Lottie } from 'vue3-lottie'

defineProps({
  active: { type: Boolean, default: false },
  data: { type: Object, required: true },
  width: { type: [String, Number], default: '100%' },
  height: { type: [String, Number], default: '100%' },
  speed: { type: Number, default: 1 },
  loop: { type: Boolean, default: false },
  autoPlay: { type: Boolean, default: true },
  fullscreen: { type: Boolean, default: false },
})

defineEmits(['on:complete', 'click:fullscreen'])

const lottieContainer = ref(null)
</script>
<style scoped lang="scss">
.fullscreen {
  position: absolute;
  top: 0;
  z-index: 3002;
}

.basic {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
